<template>
  <el-menu
      class="menu-scope"
      :default-active="defaultActive"
      router
      :collapse="collapse"
      background-color="#001529"
      text-color="#fff"
      :unique-opened="true">
    <el-menu-item class="logo-item menu-collapse" index="/" :style="{'width':(collapse?'64px':'256px')}">
      <div class="logo-box" disabled="true">
        <p v-if="!collapse">{{ CDATA.PROJECT_TITLE }}</p>
        <p v-else>{{ CDATA.PROJECT_TITLE.split('')[0] }}</p>
      </div>
    </el-menu-item>

    <slide-item
        v-for="(item, idx) in routes"
        :subroute="item"
        :barIdx="idx"
        :key="idx">
    </slide-item>

  </el-menu>
</template>

<script>
import SlideItem from './SlideItem';
import base from '@/api/modules/auth/base';

export default {
  name: 'Sidebar',

  components: {
    SlideItem
  },

  props: {
    collapse: {
      type: Boolean
    },
  },

  computed: {
    // 首次进入页面时展开当前页面所属的菜单
    defaultActive() {
      if (this.$route.meta.active) {
        return this.$route.meta.active;
      }
      let active = this.$route.path.split('/');
      // console.log(active);
      if (active.length > 3) {
        return '/' + active.slice(1, 3).join('/');
      } else {
        return this.$route.path;
      }
    },
  },

  watch: {
    '$route.path': () => {
      // this.defaultActive = this.$route.path
    }
  },

  data() {
    return {
      routes: [],
      logoPath: '',
    };
  },

  mounted() {
    this.routes = this.$router.options.routes[0].children;
    // this.getLogo();
  },

  methods: {
    // 获取logo
    async getLogo() {
      let logoPath = this.tools.getS('logoPath', 2);
      if (logoPath) {
        this.logoPath = logoPath;
        return;
      }

      const res = await this.$api.auth.getLoginInfo({
        parentSystemCode: 102
      });

      if (res.data.type === 'success') {
        let { data } = res.data;
        this.logoPath = base.prod + data[0].systemValue;
        this.tools.saveS('logoPath', this.logoPath, 2);
      }
    },

    toggleLogo() {
      this.logoVisible = !this.logoVisible;
    }

  },

};
</script>

<style lang="less">

  // logo样式
  .logo-item {
    padding-left: 26px !important;
    height: 82px;

    p {
      color: #fff;
      width: 100%;
      font-size: 18px !important;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    &.is-active {
      background-color: #001529;

      p {
        color: #fff;
      }
    }
  }

  // 菜单项和菜单头需要排列
  .el-submenu__title, .el-menu-item {
    display: flex !important;
    align-items: center;

    &:hover {
      i, span {
        color: #fff;
      }
    }

    i, span {
      color: #a6adb4;
      transition: color, transform .3s ease-in-out;
    }

    i {
      font-size: 14px;
      margin-right: 14px !important;
    }

    span {
      line-height: 40px;
    }
  }

  .el-submenu__title {
    height: 40px;
  }

  // 菜单项目
  .el-menu-item {
    padding-left: 27px !important;

    &:not(.logo-item) {
      height: 40px;
    }

    &.is-active:not(.logo-item) {
      background-color: #1890ff !important;

      i, span {
        color: #fff !important;
      }

    }
  }

  // 菜单头部
  .el-submenu__title {
    padding: 0 27px;
    padding-left: 27px !important;
  }

  .el-submenu [class^=el-icon-] {
    margin-right: 14px;
  }


</style>

<style>
  .el-menu--collapse > div > li span {
    display: none !important;
  }

  .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
</style>
